<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY gallery - Huabao</title>
    <link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
    <link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
    <link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
    <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
    <script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
    <script>
        KISSY.config({
            packages:[
                {
                    name:"gallery",
                    tag:"20111220",
                    path:"../../../",
                    charset:"utf-8"
                }
            ]
        });
    </script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img
            src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>

    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>Huabao</span>
    </div>
    <pre class="s-section">
作者：法海 &lt;<a href="mailto:fahai@taobao.com">fahai@taobao.com</a>&gt;
功能：Huabao
描述：淘宝画报的 model 抽象。通过注入自定义的业务逻辑和 ui 装饰，使用者可快速建立出一个画报成品。
　　　默认包含一套 ui 装饰，使用者可以自行定义。
源码：<a href="huabao.js">huabao.js</a></pre>

    <h3 class="s-title">Demo</h3>

    <div class="s-section">
        <p>
            Demo 包含一个列表页和详情页。点击列表中的图进入其详情页。
        </p>

        <p>
            构建一个画报应用，大体分为几个步骤：
        </p>
        <ol style="list-style: decimal inside;">
            <li>
                获取数据源。数据源可以是：页面中的 json；通过 ajax 返回的远程数据。
                数据结构需要参照 <code>Huabao.model</code> 中的 <code>Poster</code> 和 <code>Pic</code>；
                如果数据源提供的数据结构和 model 的不一致，那么需要自己重写 <code>Poster.prototype.parse</code>
                和 <code>Pic.prototype.parse</code> 方法
            </li>
            <li>生成画报对象</li>
            <li>使用预定义或自定义模板渲染</li>
            <li>添加业务逻辑。业务逻辑一般在 <code>attrChange</code> 的时候触发</li>
            <li>添加 ui 装饰，可使用已有的 ui widget 或自定义对画报进行装饰、绑定物理事件等</li>
        </ol>
        <p>
            详情和源码请参考 demo (<a href="demo/list.html" target="_blank">列表页</a>, <a href="demo/detail.html" target="_blank">详情页</a>)
        </p>
        <div class="s-demo">
            <iframe src="demo/detail.html" frameborder="0" scrolling="no" style="width: 100%; height: 1000px; margin: 10px 0;"></iframe>
        </div>
    </div>

    <h3 class="s-title">API</h3>

    <div class="s-section">
        <h4 class="s-api-title">Class</h4>

        <div class="s-api-method">
            <ul class="s-list">
                <li><a href="api/huabao.html"><code>Huabao</code></a></li>
                <li><a href="api/model/poster.html"><code>Huabao.model.Poster</code></a></li>
                <li><a href="api/model/pic.html"><code>Huabao.model.Pic</code></a></li>
            </ul>
        </div>

        <h4 class="s-api-title">Optional UI Decorator</h4>

        <div class="s-api-method">
            <ul class="s-list">
                <li><a href="api/ui/detail.html">画报详情页形式的 <code>Decorator</code></a></li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>